<template>
  <KView class="coupon-search-view">
    <KView class="coupon-search-view-header clearfix">
      <KView class="coupon-search-view-header-back" @click="backClick">
        <sys-svg name="arrowLeft"></sys-svg>
      </KView>
      <KView class="coupon-search-view-header-input">
        <search-input has-confirm v-model="searchInput" placeholder="输入关键字搜索" @confirm="toSearchData"></search-input>
      </KView>
    </KView>
    <KView class="coupon-search-view-content">
      <slot></slot>
    </KView>
  </KView>
</template>

<script>
  import SearchInput from 'common/searchInput';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      searchValue: {
        type: String,
        required: true
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        searchInput: this.searchValue
      };
    },

    methods: {
      toSearchData() {
        let searchInput = this.searchInput;
        if (searchInput.trim() === '') {
          this.$api.showToast({
            title: '请输入搜索关键字',
            icon: 'none'
          });
          return;
        }

        this.$emit('search-data', searchInput);
      },

      backClick() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      SearchInput,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .coupon-search-view {
    height: 100%;
    display: flex;
    flex-direction: column;

    .coupon-search-view-header {
      padding: formatPx(20) formatPx(30);
      height: formatPx(70);
      border-bottom: 1px solid #DADADA;

      >div {
        float: left;
        height: 100%;
      }

      .coupon-search-view-header-back {
        width: formatPx(36);
      }

      .coupon-search-view-header-input {
        width: calc(100% - #{formatPx(72)});
        margin-left: formatPx(36);
        font-size: formatPx(30);
      }
    }

    .coupon-search-view-content {
      flex: 1;
      overflow: auto;
      margin-top: formatPx(40);
      margin-bottom: formatPx(20);
      min-height: 0;
      position: relative;
    }
  }

</style>
